<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index</title>

    <script src="script/vue-2.4.0.js"></script>
</head>

<body>

    <div id="app">

        <!-- 将vue中定义的data，就是数据在div中显示出来 -->

        <h1>姓名:{{studentName}}</h1>

        <h1>学号:{{studentId}}</h1>

        <!-- vue中取js中数据，不需要写js代码，使用vue插值表达式  语法:{{data中定义的属性名}} -->
    </div>

    <script>
        //vue的代码本质上还是JavaScript，所以必须卸载script标记中
        //构建一个Vue实例(对象),创建vue对象，调用构造方法 new Vue()
        //当vue-2.4.0.js框架文件导入后，程序执行（打开浏览器访问），在浏览器缓存中，就存在一个vue框架的构造函数 
        var vm = new Vue({
            el: '#app', //element 元素，指的就是html标记，Vue中定义的数据在html哪个标签中显示。el：指定标签
            data: { //data就是数据，所有vue中的数据定义在data，数据以对象属性的形式定义在data中
                studentId: '10012345678', //学号
                studentName: '星星', //姓名

            },
        })
    </script>
</body>

</html>